<template>
  <div class="select-com clear"
       ref="selectCom"
       :class="{'select-border': border, 'hover-border': show && hoverBorder}"
       :style="{background: background}"
       @click.stop="showOption"
       @mouseleave="leaveClear">
    <div
      :style="{'width': options.width, 'color': options.color}"
      class="select-trigger">
      <slot name="left"></slot>
      <span
        style="float: left"
        :title="defaultName"
        :style="{width: `75%`, 'font-size': fontSize, color: optionColor}"
        :class="{choose: choose, 'fontBold': fontBold, selectColor: type === 'select'}">{{defaultName}}</span>
      <div
        class="arrow-div" :style="{float: iconPosition}">
        <i class="iconfont icon-select-arrow" :class="{'mr10': isArrowRight}" v-if="triangle"></i>
      </div>
    </div>

    <div
      class="option-com"
      :class="{'select-fixed': isFixed, 'top-shadow': positionTop}"
      :style="{
        top: optionTop,
        left: `${optionLeft}px`,
        maxHeight: maxHeight,
        width: optionWidth,
        background: optionBackground}"
      v-if="show">
      <input
        v-if="selectData.length > 0"
        ref="input"
        type="text"
        :style="{width: `${inputWidth-7}px`}"
        class="input-n120 input-option"
        style="height: 100%"
        :placeholder="placeholder"
        v-show="isShowFilter"
        @click.stop="inputClick"
        @input="handleInput"
        @compositionstart="compositionstartInput"
        @compositionend="compositionendInput"
      />
      <div class="select-option" :class="selectOption" :title='name' v-if="all" @click.stop="optionClick(name, '')">{{name}}</div>
      <template v-if="optionTypeIs(Object)">
        <div
          class = "select-option"
          v-for = "(value, key, index) in option"
          :value = key
          :title = 'value'
          :style = "{'font-size': fontSize}"
          @click.stop = "optionClick(value, key)">
          <b><i class="iconfont icon-yuan" :class="{'red': index === 1}" v-if="icon"></i></b>
          {{value}}
        </div>
      </template>
      <template v-else-if="optionTypeIs(Array)">
        <template v-if="isShowFilter">
          <div
            class = "select-option"
            v-for = "(item, index) in selectData"
            :value = item.key
            :title = 'item.value'
            :style = "{'font-size': fontSize}"
            @click.stop = "optionClick(item.value, item.key)">
            <b><i class="iconfont icon-yuan" :class="{'red': index === 1}" v-if="icon"></i></b>
            {{item.value}}
          </div>
        </template>
        <template v-else>
          <div
            class = "select-option"
            v-for = "(item, index) in option"
            :value = item.key
            :title = 'item.value'
            :style = "{'font-size': fontSize}"
            @click.stop = "optionClick(item.value, item)">
            <b><i class="iconfont icon-yuan" :class="{'red': index === 1}" v-if="icon"></i></b>
            {{item.value}}
          </div>
        </template>
      </template>
      <div class="select-option select-footer" :class="selectOption" v-if="isFooter">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'zz-select',
    data () {
      return {
        show: false,
        choose: false,
        optionTop: 0,
        optionLeft: 0,
        optionWidth: '100%',
        defaultName: '',
        copyDefaultName: '',
        selectData: [],
        copySelectData: [],
        isCompositionend: false
      }
    },
    filters: {
      optionFilters (value) {}
    },
    props: {
      fontSize: {
        type: String,
        default: '14px'
      },
      fontBold: {
        type: Boolean,
        default: false
      },
      background: {
        type: String,
        default: '#fff'
      },
      optionBackground: {
        type: String,
        default: '#fff'
      },
      selectOption: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      chooseDefault: {
        type: Number,
        default: 0
      },
      option: {
        type: [Object, Array]
      },
      type: {
        type: String,
        default: 'choose'
      },
      all: {
        type: Boolean,
        default: false
      },
      name: {
        type: String,
        default: ''
      },
      options: {
        type: Object,
        default: function () {
          return {
            width: '100px'
          }
        }
      },
      triangle: {
        type: Boolean,
        default: true
      },
      border: {
        type: Boolean,
        default: false
      },
      hoverBorder: {
        type: Boolean,
        default: false
      },
      iconPosition: {
        type: String,
        default: 'right'
      },
      icon: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '100%'
      },
      maxHeight: {
        type: String,
        default: '220px'
      },
      // 传入option为对象时 是否出现滚动条
      objectOPtionHeight: {
        type: String,
        default: ''
      },
      // 是否用fixed css
      isFixed: {
        type: Boolean,
        default: false
      },
      // 下拉框位置是否在顶部
      positionTop: {
        type: Boolean,
        default: false
      },
      isFooter: {
        type: Boolean,
        default: false
      },
      isArrowRight: {
        type: Boolean,
        default: true
      },
      optionColor: {
        type: String,
        default: `$color-grid`
      },
      data: [Object, String, Number],
      filtersFun: null,
      placeholder: {
        type: String,
        default: '请输入搜索条件'
      },
      isShowFilter: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      chooseDefault () {
        this.defaultName = this.copyDefaultName
      },
      name (newValue) {
        this.defaultName = newValue
      },
      option (newItems) {
        this.selectData = newItems
        this.copySelectData = newItems
      }
    },
    created () {
      this.selectData = this.option
      this.copySelectData = this.option
      this.optionWidth = this.width
      this.defaultName = this.name
      this.copyDefaultName = this.name
    },
    methods: {
      compositionstartInput () {
        this.isCompositionend = true
      },

      compositionendInput (e) {
        this.isCompositionend = false
        this.handleInput(e)
      },
      handleInput (e) {
        if (this.isCompositionend) {
          return
        }
        const { value } = e.target
        this.selectData = this.copySelectData.filter(item => {
          return item.value.includes(value)
        })
      },
      leaveClear () {
        this.show = false
        this.selectData = this.option
      },
      optionTypeIs (type) {
        const optType = Object.prototype.toString.call(this.option)
        let ret = false
        if (optType === '[object Object]' && type === Object) {
          ret = true
        } else if (optType === '[object Array]' && type === Array) {
          ret = true
        }
        return ret
      },
      showOption (e) {
        if (this.disabled) {
          return false
        }
        if (this.isFixed) {
          this.setFixedPosition(e)
        } else {
          if (this.positionTop) {
            this.setPositionTop()
          } else {
            let height = 1
            if (!this.border) {
              height = 5
            }
            this.optionTop = this.$refs.selectCom.offsetHeight - height + 'px'
          }
        }
        this.show = true
      },
      setPositionTop () {
        let length = Object.keys(this.option).length
        if (length > 7) {
          length = 7
        }
        this.optionTop = `-${length * 31}px`
      },
      setFixedPosition (e) {
        const rect = this.$refs.selectCom.getBoundingClientRect()
        let py = ''
        if (this.$Browser().trident) {
          py = e.clientY
        } else {
          py = e.y
        }
        if (this.isShowFilter) {
          this.optionTop = `${py}px`
        } else {
          this.optionTop = `${py - 5}px`
        }
        this.optionLeft = rect.left
        this.optionWidth = `${rect.width}px`
        this.inputWidth = rect.width
      },
      remove () {
        this.defaultName = '全部'
        const obj = {
          value: '全部',
          key: 0
        }
        this.$emit('optionClick', obj)
      },
      optionClick (value, key) {
        const obj = {
          value: value,
          key: key
        }
        if (this.type === 'choose') {
          this.defaultName = value
        } else {
          this.choose = true
        }
        if (this.data) {
          obj.value = this.data
        }
        this.show = false
        this.$emit('optionClick', obj)
      },
      inputClick () {}
    }
  }
</script>

<style lang="scss">
  .select-com{
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 0 0 9px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    &:last-child{
      margin-right: 0;
    }
    .select-trigger{
      height: 100%;
      float: left;
      overflow: hidden;
      span{
        height: 28px;
        @include ellipsis;
      }
      .arrow-div{
        display: inline-block;
        height: 28px;
        vertical-align: top;
        .icon-select-arrow{
          font-size: 12px;
        }
      }
      .selectColor{
        color: $color-grid;
      }
      .choose{
        color: $color-grid;
      }
    }
    .option-com{
      min-width: 60px;
      overflow-y: auto;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
      z-index: 2;
      position: absolute;
      left:-1px;
    }
    .select-fixed{
      position: fixed;
    }
    .top-shadow{
      box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.2);
    }
    .fontBold{
      font-weight: bold;
    }
    .input-option{
      height: 28px;
      line-height: 28px;
      padding:2px 0 2px 7px;
    }
    .select-option{
      height: 28px;
      line-height: 28px;
      padding:2px 7px;
      text-align: left;
      font-size: $font-size-small;
      cursor: pointer;
      color: $color-grid;
      @include ellipsis;
      .iconfont{
        margin-right: 5px;
      }
      .red{
        color: $red;
      }
    }
    .select-option:hover{
      background: #f5f5f5;
    }
    .select-footer{
      border-top: 1px $color-line solid;
    }
  }
  .select-border {
    border: 1px solid $color-line;
  }
  .hover-border{
    border: 1px solid $color;
  }
</style>
